<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 300px;
            display: flex;
            justify-content: space-between;
        }
        .wai{
            margin: 0 auto;
            width: 500px;
        }
        ul>li{
            list-style: none;
        }
        .wai>ul>li>span:first-child{
            margin-right: 10px;
        }
        .wai>ul>li>span:last-child{
            background-color: orange;
            color: white;
            font-size: 12px;

        }
    </style>
</head>

<body>
    <div class="wai">
        <header>
            <h1>百度热搜</h1> <span>换一换</span>
        </header>
        <ul>
            <!-- <li><span></span><span>热</span></li> -->
        </ul>
      </div>
</body>

</html>
<script>
    // 封装函数
    var current =1
    var page =10
    function back(arr){
     var newarr=arr.slice((current-1)*page,current*page)
     document.querySelector('ul').innerHTML=newarr.map((item)=>{
        return `  <li>${item.content}<span style="display:${item.ishot}">热</span></li>`
      }).join("")
   
    }
    function ajax(method,address,cb) {
        var xhr = new XMLHttpRequest();
        xhr.open(method,address);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                cb( JSON.parse(xhr.responseText));

            }
        }
        xhr.send();
    }
    ajax("get", "./data1.json",back)
    document.querySelector('header span').onclick=function(){
        if(++current>3){
            current=1
        }
        ajax("get","./data1.json",back)
       
    }
</script>